import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {
  Form, 
  Tooltip,
  Checkbox,
  Icon,
  Input,
  InputNumber
} from 'antd';
import noop from 'util/noop';
const FormItem = Form.Item;

@Relax
export default class TypeSet extends Component{
  static defaultProps = {
    defaultComment: {},
    onSetting: noop
  }
  render() {
    let {layoutProps, defaultComment} = this.props;
    let {defaultContent, delayDay, status} = defaultComment.toJS();

    let commentOptiosnHtml = (
      <div className="t-grayer">
          <p>
            订单已确认收货后，
            <InputNumber
              min = "1"
              max ="30"
              name="delayDay"
              defaultValue={delayDay}
              value={delayDay}
              style={{width:'60px',margin:'0 3px'}} 
              onChange={(value) => {this.onCommentSet({target: {name:"delayDay", value: value}})}} />
            <span>（限填1-30）天内未评价，商品默认好评。默认好评提示语：用户未及时作出评论，默认好评~</span>
          </p>
          <p> 
            默认好评提示语：
            <Input 
              name="defaultContent"
              maxlength="50"
              defaultValue={defaultContent}
              value={defaultContent} 
              type="textarea"
              onChange={this.onCommentSet}
              className="goodComments" /> 
            <span>限填10-50字符</span>
          </p>
        </div>
    )
    return (
      <FormItem label='评价默认好评设置' {...layoutProps}>
        <Checkbox name="status" onChange={this.onCommentSet} checked={status ==1}>商品默认好评</Checkbox>
        <Tooltip 
          placement="bottom" 
          title="选中开启。开启后,商品启用默认好评；未开启则商品不做默认好评显示。">
          <span className="help-tips">
            <Icon type="info-circle"/>
          </span>
        </Tooltip>
        {status == 1 ? commentOptiosnHtml : null}
      </FormItem>
    )
  }
  onCommentSet = (event) => {
    let {name, value, checked} = event.target;
    let {onSetting, defaultComment} = this.props;
    if(name == 'status'){
      value = checked ? 1 : 0;
    }
    this.props.onSetting({
      defaultComment: defaultComment.merge({[name]: value})
    })
  }
}